<template>
  <div class="assignment-header">
    <el-button @click="$router.go(-1)" icon="left" type="text" class="back-button">
      <img src="@/assets/svgs/left.svg" alt="Back" />
    </el-button>
    <img src="@/assets/svgs/aislogo2.svg" alt="logo" class="logo">
    <span class="title">智慧助手</span>
  </div>

  <div class="chat-app">
    <div class="chat-header">
      <div class="sidebar">
        <button class="new-conversation-button">+ 开始新对话</button>
        <div class="history-link"><span>历史记录</span></div>
      </div>
    </div>
    <div class="chat-main">
      <div class="chat-message">
        <div class="avatar"><img src="@/assets/svgs/aislogo.svg" alt="ailogo" style="width: 40px;height: 40px;border-radius: 50%;margin-left: 5px;"></div>
        <div class="text">你好，我是你的智慧助手</div>
      </div>
      <div class="chat-message">
        <div class="avatar"><img src="@/assets/svgs/aislogo.svg" alt="ailogo" style="width: 40px;height: 40px;border-radius: 50%;margin-left: 5px;"></div>
        <div class="text">我可以回答你的各种问题，给你工作学习上提供帮助</div>
      </div>
      <div class="chat-message1" v-for="(message, index) in messages" :key="index">
        <div class="avatar1" :class="{ 'self': message.self }"></div>
        <div class="text1">{{ message.text }}</div>
      </div>
    </div>
    <div class="chat-input">
        <input type="text" placeholder="请输入对话内容" v-model="inputText" @keyup.enter="sendMessage" />
        <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();
const goBack = () => {
  router.go(-1);
};

const messages = ref([
  { text: '你好，智慧助手', self: false },
]);
const inputText = ref('');
const eventSource = ref(null);

// 建立 SSE 连接
onMounted(() => {
  eventSource.value = new EventSource('http://localhost:8081/sse');

  eventSource.value.onmessage = (event) => {
    const msg = JSON.parse(event.data);
    messages.value.push({ text: msg.content, self: false });
  };

  eventSource.value.onerror = (error) => {
    console.error('SSE 连接出错:', error);
    eventSource.value.close();
  };
});

const sendMessage = () => {
  if (inputText.value.trim() !== '') {
    // 将用户消息添加到消息列表
    messages.value.push({ text: inputText.value, self: true });

    // 发送请求到后端
    axios.post('/ai', {
      mode: 'deepseek-r1', // 可根据实际情况修改模型名称
      msgs: messages.value.map(msg => msg.text)
    })
   .then(response => {
      console.log('请求发送成功');
      inputText.value = '';
    })
   .catch(error => {
      console.error('请求发送失败:', error);
    });
  }
};

</script>

<style scoped>
.assignment-header {
  display: flex;
  height: 7lvh;
  align-items: center;
  background-color: #13227A;
  color: white;
}

.back-button {
  color: white;
  border: none;
  margin-left: 8px;
  width: 25px;
  height: 25px;
}

.logo {
  width: 30px;
  height: 30px;
  margin-top: 3px;
  margin-left: 1.5%;
}

.title {
  font-size: 20px;
  margin-left: 0.3%;
}

.chat-app {
  display: flex;
  height: 90vh;
}

.chat-header {
  float: left;
  height: 100%;
  width: 15%;
  text-align: center;
  border-right: 1px solid #9e9ea5;
}

.back-button {
  color: white;
  border: none;
  width: 25px;
  height: 25px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.new-conversation-button {
  background-color: #1a3a8b;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
}

.new-conversation-button:hover {
  background-color: #7c1b1b;
}

.history-link {
  color: #6B7280;
  float: left;
  display: flex;
  flex-direction: row;
  font-size: 16px;
}

.history-link:hover {
  text-decoration: underline;
}

.chat-main {
  flex-direction: column;
  height: 82lvh;
  width: 84lvw;
  padding-top: 20px;
  overflow-y: auto; /* 垂直方向溢出时显示滚动条 */
  max-height: 82lvh;
  background-color: #f2f2f2;
}

.chat-message {
  display: flex;
  height: 50px;
  margin-bottom: 10px;
}

.chat-message1{
  height: 50px;
  margin-bottom: 10px;
  overflow: hidden;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;

}

.avatar1{
  float: right;
  width: 40px;
  height: 40px;  
  margin-right: 5px;
  border-radius: 50%;
  background-color: #0056b3;
}

.text {
  max-width: 60%;
  padding: 5px 10px;
  background-color: #ffffff;
  border-radius: 5px;
}

.text1 {
  float: right;
  max-width: 60%;
  padding: 5px 10px;
  background-color: #ffffff;
  border-radius: 5px;
  line-height: 30px;
  margin-right: 10px;
}
.self .avatar {
  margin-left: 10px;
  margin-right: 0;
}

.chat-input {
  position: absolute;
  margin-left: 15.3lvw;
  margin-top: 85lvh;
  width: 84lvw;
  height: 4lvh;
  align-items: center;
}

.chat-input input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ced4da;
  width: 76lvw;
  height: 3.5lvh;
  border-radius: 5px;
}

.chat-input button {
  margin-left: 5px;
  width: 6lvw;
  height: 5lvh;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #0056b3;
}
</style>